<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.all.js"></script>
</head>
<body style="overflow-y: hidden;">
<form class="layui-form">
    <div class="layui-card">
        <div class="layui-card-header">
            <b>{{.Name}}&nbsp;&nbsp;</b>
            <a href="javascript:;" onclick="refresh()">
                <i class="layui-icon layui-icon-refresh" style=" font-size:15px;color: #1E9FFF;"></i>
            </a>
            <div class="layui-input-inline">
                <input id="date" type="text" class="layui-input">
            </div>
            <a href="javascript:;" onclick="query()">
                <i class="layui-icon layui-icon-search" style=" font-size:20px;color: #00b10d;"></i>
            </a>
            &nbsp;&nbsp;
            <a href="javascript:;" onclick="clearLog()">
                <i class="layui-icon layui-icon-fonts-clear" style=" font-size:20px;color: #ffa300;"></i>
            </a>
            <div class="layui-input-inline">
                <label class="layui-form-label">监控</label>
                <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest"
                       lay-text="开|关">
            </div>
        </div>
        <div id="context" style="overflow-y: scroll;">

        </div>
    </div>
</form>
<script>
    var $ = layui.$;
    var height = $(document).height() - 60;
    var form = layui.form;
    var size = 0;
    var netSend = false;
    var id ={{.Name}};
    form.render();
    layui.laydate.render({
        elem: '#date',
        done: function (value, date) {
            refresh({{.Name}})
        }
    });

    function getFormatDate() {
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
        var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
        return year + "-" + month + "-" + date;
    }

    $('#date').val(getFormatDate())


    refresh();
    var t;
    layui.form.on('switch(switchTest)', function (data) {
        if (this.checked) {
            t = setInterval("query(id)", 3000);
        } else {
            clearInterval(t);
        }
    });

    function refresh() {
        size = 0;
        netSend = false;
        $("#context").empty();
        logSend(id);
    }

    function query() {
        netSend = false;
        logSend(id);
    }

    $("#context").scroll(function () {
        var topp = $(this).scrollTop();
        var height = $('#context')[0].scrollHeight;
        console.log(height);
        if (topp >= height - 1000) {
            query(id)
        }

    });

    function clearLog() {
        size = 0;
        $('#context').empty();
        $.ajax({
            type: "POST",
            url: "/clear",
            data: {id: id, date: $('#date').val()},
            beforeSend: function () {
                layer.load(1, {shade: false});
            },
            success: function (result) {
                layer.closeAll('loading');
                layer.msg(result.data);
            },
            error: function (data) {
                layer.closeAll('loading');
                layer.msg(data.data);
            },
        });
    }

    function logSend() {
        if (netSend) {
            return
        }
        $.ajax({
            type: "POST",
            url: "/logs",
            data: {id: id, date: $('#date').val(), size: size},
            beforeSend: function () {
                layer.load(1, {shade: false});
            },
            success: function (result) {
                layer.closeAll('loading');
                $('#context').height(height);
                if (result.size != 0) size = result.size;
                if (result.data != "")
                    $("#context").append("<pre class=\"layui-code\" lay-skin=\"notepad\">" + result.data + "</pre>");
                netSend = true;
            },
            error: function (data) {
                layer.closeAll('loading');
                layer.msg(data.data);
                netSend = true;
            },
        });
    }
</script>
</body>
</html>